<script setup lang="ts">
  import { useModeModalBinder } from '@/hooks/arco/useModeModalBinder';
  import { useForm } from '@/hooks/arco/useForm';
  import { editPermission, addPermission, queryList } from '@/api/system/menu';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';

  const menuTree = useSelectOption({
    apiFun: queryList,
  });

  const form = useForm({
    state: {
      id: '',
      code: '',
      name: '',
      permissionType: 1,
      parentId: undefined,
      status: 1,
      orders: 1,
      clientCodes: [],
    },
    rules: {
      name: [{ required: true, message: '请输入名称' }],
      code: [{ required: true, message: '请输入CODE' }],
      permissionType: [{ required: true, message: '请选择类型' }],
      clientCodes: [{ required: true, message: '请选择clientCode' }],
    },
  });

  const modal = useModeModalBinder({
    modes: ['add', 'edit'] as const,
    onShow(mode, otherParams) {
      menuTree.retry();
      if (mode === 'add') {
        form.backToInit();
      } else {
        form.setFieldsValue(otherParams);
      }
    },
    async onOkClick(mode) {
      await form.validate();
      if (mode === 'add') {
        return addPermission(form.state);
      }
      return editPermission(form.state);
    },
  });

  const fieldNames = {
    key: 'id',
    title: 'name',
    children: 'permissions',
  };

  defineExpose(modal.expose);
</script>

<template>
  <a-modal v-bind="modal.bindProps">
    <a-form v-bind="form.bindProps">
      <a-form-item label="名称" field="name">
        <a-input v-model="form.state.name" placeholder="请输入名称" />
      </a-form-item>
      <a-form-item label="CODE" field="code">
        <a-input v-model="form.state.code" placeholder="请输入Code" />
      </a-form-item>
      <a-form-item label="类型" field="permissionType">
        <dict-select
          v-model="form.state.permissionType"
          type="RpPermissionType"
          placeholder="请选择"
        />
      </a-form-item>
      <a-form-item label="父菜单" field="parentId">
        <a-tree-select
          v-model="form.state.parentId"
          v-bind="menuTree.bindProps"
          placeholder="请选择"
          :field-names="fieldNames"
          allow-clear
        ></a-tree-select>
      </a-form-item>
      <a-form-item label="状态" field="status">
        <a-select v-model="form.state.status" placeholder="请选择">
          <a-option :value="1">启用</a-option>
          <a-option :value="0">禁用</a-option>
        </a-select>
      </a-form-item>

      <a-form-item label="排序" field="orders">
        <a-input-number v-model="form.state.orders" placeholder="请输入" />
      </a-form-item>

      <a-form-item label="可用端" field="clientCodes">
        <a-select
          v-model="form.state.clientCodes"
          multiple
          placeholder="请选择"
        >
          <a-option value="medstadmin">medstadmin</a-option>
          <a-option value="nhisadmin">nhisadmin</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
